<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职工管理系统</title><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <%--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <%--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>--%>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header navbar-center">
                    <a class="navbar-brand" href="#">&nbsp;职工管理系统&nbsp;</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="firstpage" style="background-color: #e7e7e7">
                            <a href="#">&nbsp;首页&nbsp;</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">&nbsp;部门管理</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">&nbsp;职工管理</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">&nbsp;请假审批</a>
                        </li>
                    </ul>
                    <!--向右对齐-->
                    <form id="back-form" class="navbar-form navbar-right" action="${pageContext.request.contextPath}/admin/back">
                        <button style="outline: none" id="back" type="button" class="btn btn-danger">退出登录</button>
                    </form>
                    <p class="navbar-text navbar-right" id="admin-tip"><i class="fa fa-user-circle-o" style="font-size:18px;cursor:pointer">&nbsp;&nbsp;管理员</i></p>
                </div>
            </div>
        </nav>
      </div>
    </div>
</div>
<div class="container-full">
    <iframe class="iframe" id="iframe1" src="http://localhost:8080/web/picture.jsp" style="width: 100%;height: 763px;position: absolute;top: 50px;outline: none;display: block"></iframe>
    <iframe class="iframe" id="iframe2" src="http://localhost:8080/web/dept/load" style="width: 100%;height: 763px;position: absolute;top: 50px;outline: none;display: none"></iframe>
    <iframe class="iframe" id="iframe3" src="http://localhost:8080/web/staff/load" style="width: 100%;height: 763px;position: absolute;top: 50px;outline: none;display: none"></iframe>
    <iframe class="iframe" id="iframe4" src="http://localhost:8080/web/leave/load" style="width: 100%;height: 763px;position: absolute;top: 50px;outline: none;display: none"></iframe>
</div>

<%--信息提示框--%>
<div style="position: absolute;left: 600px;margin-top: 100px;z-index: 1051">
    <div id="success" class="alert alert-success" style="width: 300px;text-align: center;display: none">登录成功</div>
</div>

</body>
<script>
    //登陆成功信息显示
    $('#success').fadeToggle()
    setTimeout(function (){
        $("#success").fadeToggle("slow")
    },2000)
    //点击不同导航栏出现阴影效果、并进行页面切换
    let dropdown=document.getElementsByClassName("dropdown")
    for (let i = 0; i < dropdown.length; i++) {
        dropdown[i].onclick=function (){
            $('.firstpage').css("background-color","#f8f7f7")
            if(i==0){
                $('.iframe').hide()
                $('#iframe2').show()
            }else if(i==1){
                $('.iframe').hide()
                $('#iframe3').show()
            }else if(i==2){
                $('.iframe').hide()
                $('#iframe4').show()
            }
        }
    }
    $('.firstpage').click(function (){
        $('.firstpage').css("background-color","#e7e7e7")
        $('.iframe').hide()
        $('#iframe1').show()
    })
    //退出登录
    $('#back').click(function (){
        $('#back-form').submit()
    })
</script>
</html>
